<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Color4Bg Demo</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#background {
				width: 100%;
				height: 100%;
			}

			#controls {
				position: absolute;
				padding: 30px;
				top: 0;
				right: 0;
				width: 300px;
				background-color: #fff;
				opacity: 0.3;
			}

			.button {
				margin: 5px;
				padding: 10px;
				color: #fff;
				text-align: center;
				line-height: 16px;
				background-color: #000;
				cursor: pointer;
			}

			#testcanvas {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div id="background"></div>

		<div id="controls" style="display: none;">
			<div class="button" id="btn_reset">Reset Seed</div>
			<div class="button" id="btn_changeColor">Change Color</div>
			<div class="button" id="btn_resize">Resize</div>
			<hr />
			<div class="button" id="btn_copy_colors">Copy Colors</div>
			<hr />

			<div class="control-row">
				<div class="slider-row">
					<label class="slider-title">Scale</label>
					<input class="slider-uniform" type="range" name="" min="0.0" max="20" step="1" value="10" id="slider_1" />
					<label class="slider-num" id="num_p1">0</label>
				</div>
			</div>
			<div class="control-row">
				<div class="slider-row">
					<label class="slider-title">Start</label>
					<input class="slider-uniform" type="range" name="" min="-10000" max="20000" step="100" value="7300" id="slider_2" />
					<label class="slider-num" id="num_p2">0</label>
				</div>
			</div>
			<div class="control-row">
				<div class="slider-row">
					<label class="slider-title">End</label>
					<input class="slider-uniform" type="range" name="" min="-10000" max="10000" step="100" value="7200" id="slider_3" />
					<label class="slider-num" id="num_p3">0</label>
				</div>
			</div>
		</div>

		<script type="module">
			import { FluidBg } from "../index.js"
            
			let colorbg = new FluidBg({
				dom: "background",
				colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"], // Pastel
				// colors: ["#D1ADFF", "#98D69B", "#FAE390"], // Pastel
				// colors: ["#ff3300", "#00ff33", "#0099ff", "#ffffff"], // blur dot
				// colors: ["#007FFE","#3099FE","#60B2FE","#90CCFE","#C0E5FE","#F0FFFE"], // 渐变蓝色
				seed: 1000,
				loop: true

				// radius_inner: 0.02,
				// radius_outer: 0.09
			})

			document.querySelector("#btn_reset").addEventListener(
				"click",
				() => {
					let seed = Math.floor(Math.random() * 99999)
					colorbg.reset(seed)
					// colorbg.reset(1000)
				},
				false
			)

			document.querySelector("#btn_changeColor").addEventListener(
				"click",
				() => {
					// colorbg.colors(["#F00911", "#F3AA00", "#F6EE0B", "#39E90D", "#195ED2", "#F00911", "#F00911", "#F3AA00", "#F6EE0B", "#39E90D", "#195ED2", "#F00911"])
					colorbg.colors(["#007FFE", "#F0FFFE"])
				},
				false
			)

			document.querySelector("#btn_resize").addEventListener(
				"click",
				() => {
					document.querySelector("#background").style.width = "50%"
					colorbg.resize()
				},
				false
			)

			document.querySelector("#btn_copy_colors").addEventListener(
				"click",
				() => {
					let colors = createColorQueryString(colorbg.palette)
					console.log("colors: ")
					console.log(colors)
				},
				false
			)

			document.querySelector("#slider_1").addEventListener("input", function () {
				colorbg.update("wavy", this.value)
			})
			document.querySelector("#slider_2").addEventListener("input", function () {
				colorbg.start_(parseInt(this.value))
				document.querySelector("#num_p2").textContent = this.value
			})
			document.querySelector("#slider_3").addEventListener("input", function () {
				colorbg.end_(parseInt(this.value))
				document.querySelector("#num_p3").textContent = this.value
			})


			function createColorQueryString(colors) {
				// 检查输入是否为数组，如果不是或为空，返回空查询字符串
				if (!Array.isArray(colors) || colors.length === 0) {
					return ""
				}

				// 使用map()方法来转换每个颜色值，去除颜色值前的'#'并构造每个参数
				const queryParams = colors.map((color, index) => {
					// 去除颜色值前的'#'，并构造形如 "color0=xxxxxx" 的字符串
					return `color${index}=${color.slice(1)}`
				})

				// 使用join()方法将所有参数用'&'连接起来，形成完整的查询字符串
				return "?" + queryParams.join("&")
			}
		</script>
	</body>
</html>
